<script setup lang="ts">
import { ref, type Component } from 'vue';
import { useWorld } from '../../../../composables';
import PageContainer from '../../components/page.vue';
import AlleyView from './alley/index.vue';
import ShopView from './shop/index.vue';

const { back } = useWorld();

const activeTabKey = ref('shop');
const tabList = [
  {
    key: 'shop',
    label: '万宝堂',
  },
  {
    key: 'alley',
    label: '隐蔽小巷',
  },
];
const tabMap: Record<string, Component> = {
  shop: ShopView,
  alley: AlleyView,
};
</script>

<template>
  <page-container title="世界 - 坊市" :show-back-button="true" @back="back">
    <div class="fangshi w-full h-full flex flex-col">
      <div class="flex-none">
        <a-tabs v-model:activeKey="activeTabKey" :centered="true">
          <a-tab-pane
            v-for="item in tabList"
            :key="item.key"
            :tab="item.label"
          ></a-tab-pane>
        </a-tabs>
      </div>
      <div class="flex-1 overflow-auto">
        <component :is="tabMap[activeTabKey]"></component>
      </div>
    </div>
  </page-container>
</template>

<style>
.fangshi .ant-tabs-top > .ant-tabs-nav {
  margin-bottom: 0;
}
</style>
